<template>
  <div class="page4-container">
    <!-- <div class="box1">
      <div class="card-title">
        <div class="title-item">数据统计</div>
      </div>
      <div class="box1-childrenbox">
        <div class="part-box" v-for="(item,index) of dataStatistics">
          <div class="number-show-box" :key="`${index}_sj`">
            <div class="sj-number">{{ item.value }}</div>
            <div class="sj-label">{{ item.label }}</div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="box-4">
      <div>
        <div class="card-title">
          <div class="title-item">最近一周检测</div>
        </div>
        <div class="ratio-box">
          <div>
            <div class="echart-box" id="echart1"></div>
          </div>
        </div>
      </div>
      <div>
        <div class="card-title">
          <div class="title-item">各工作站检测量</div>
        </div>
        <div class="ratio-box">
          <div>
            <div class="echart-box" id="echart2"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="box1" style="margin-top: 12px;">
      <div class="card-title">
        <div class="title-item">我的检测统计</div>
        <div style="display: flex;justify-content: flex-end;align-items: center;">
          <div style="color: rgb(111 111 111);font-size: 13px;">统计范围：</div>
          <el-select style="width: 120px;" v-model="days" size="small" placeholder="请选择" @change="getManuStatistic">
            <el-option label="一周" value="7"></el-option>
            <el-option label="一月" value="30"></el-option>
            <el-option label="一年" value="365"></el-option>
          </el-select>
        </div>
      </div>
      <div id="echart3" style="width: 100%;height: 300px;">

      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { mapGetters } from 'vuex'
import { getClassifyTj, getDeptFwl, getManuStatistic, getUploadTjByDate, getZfwl } from '@/api/index'

export default {
  name: 'Index',
  computed: {
    ...mapGetters(['classify']),
    dataStatistics() {
      return [...this.classifyList, { value: this.zfwl, label: '累加访问' }]
    }
  },
  data() {
    return {
      value: '',
      classifyList: [],
      zfwl: 0,
      myChart1: null,
      myChart2: null,
      myChart3: null,
      colors: ['#57B7E7', '#4597C9', '#3375AF', '#2A5A9C', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
      option1: {
        xAxis: {
          type: 'category'
        },
        dataset: { source: [] },
        yAxis: {}, tooltip: {}, legend: {
          bottom: 0
        },
        series: [
          // {
          //   type: 'bar',
          //   itemStyle: {
          //     color: '#61C1EB'
          //   }
          // },
        ]
      },
      option2: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: '20px',
          top: '10%'
        },
        series: [
          {
            name: '各工作站检测量',
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
            // label: {
            //   color: '#D0EDFF'
            // }
          }
        ]
      },
      option3: {
        tooltip:{},
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar',
            itemStyle: {
              color: '#2A5A9C'
            }
          }
        ]
      },
      days: '7'
    }
  },
  mounted() {
    this.getZfwl()
    this.getDeptFwl()
    this.getUploadTjByDate()
    this.getClassifyTj()
    this.getManuStatistic()
  },
  methods: {
    renderEchart1() {
      if (!this.myChart1) {
        this.myChart1 = echarts.init(document.getElementById('echart1'))
      }
      this.myChart1.setOption(this.option1)
    },
    renderEchart2() {
      if (!this.myChart2) {
        this.myChart2 = echarts.init(document.getElementById('echart2'))
      }
      this.myChart2.setOption(this.option2)
    },
    renderEchart3() {
      if (!this.myChart3) {
        this.myChart3 = echarts.init(document.getElementById('echart3'))
      }
      this.myChart3.setOption(this.option3)
    },
    getZfwl() {
      getZfwl().then(res => {
        this.zfwl = res.data
      })
    },
    getDeptFwl() {
      getDeptFwl().then(res => {
        this.option2.series[0].data = res.data.map(el => {
          return {
            name: el.departmentName,
            value: el.visitCount
          }
        })
      }).finally(() => {
        this.renderEchart2()
      })
    },
    getUploadTjByDate() {
      getUploadTjByDate().then(res => {
        let data = res.data
        let max = 0, maxItem = {}
        let source = [['1']]
        for (let item of data) {
          if (item.allStatisticVOChildren.length >= max) {
            max = Math.max(max, item.allStatisticVOChildren.length)
            maxItem = item
          }
          let arr = [item.name]
          for (let el of item.allStatisticVOChildren) {
            arr.push(el.all)
          }
          source.push(arr)
        }
        let i = 0
        for (let name of maxItem.allStatisticVOChildren) {
          source[0].push(name.name)
          this.option1.series.push({
            type: 'bar',
            itemStyle: {
              color: this.colors[i]
            }
          })
          i++
        }
        this.option1.dataset.source = source
        console.log(this.option1)
      }).finally(() => {
        this.renderEchart1()
      })
    },
    getClassifyTj() {
      getClassifyTj().then(res => {
        this.classifyList = res.data.map(el => {
          return {
            value: el.all,
            label: el.name
          }
        })
      })
    },
    getManuStatistic() {
      getManuStatistic({ days: this.days }).then(res => {
        let data = res.data
        let departmentNames = [], counts = []
        for (let item of data) {
          departmentNames.push(item.departmentName)
          counts.push(item.count)
        }
        this.option3.xAxis.data = departmentNames
        this.option3.series[0].data = counts
      }).finally(() => {
        this.renderEchart3()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.page4-container {
  background-color: #F5FAFE;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  font-size: 14px;
  color: #30AFD8;

  .page-title {
    font-size: 16px;
    color: #909399;
    line-height: 20px;
    text-align: left;
    font-weight: bold;
    padding: 0 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .teacher-box {
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 24px 40px;
    margin-bottom: 16px;
    background-color: #FFFFFF;

    img {
      width: 70px;
      height: 70px;
      margin-right: 64px;
    }

    > div {
      flex: 1 1 500px;

      > div {
        &:first-of-type {
          font-size: 26px;
          color: #909399;
          line-height: 24px;
          margin: 16px 0;
        }

        &:last-of-type {
          font-size: 14px;
          color: #909399;
          line-height: 24px;
          text-align: left;
          display: flex;
          justify-content: space-between;
          align-items: center;

          > div {
            flex: 1 1 300px;

            > span {
              margin-right: 8px;
            }
          }
        }
      }
    }
  }

  .box1 {
    margin: 0 0 12px;
    background-color: #FFFFFF;
    box-shadow: 0 0 5px 1px #DEE8F1;
    border-radius: 10px;
    padding-bottom: 20px;

    .box1-childrenbox {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      margin-top: 40px;
      margin-bottom: 16px;

      .part-box {
        flex: 1 1 100px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-right: 1px solid #e4e4e4;

        &:last-of-type {
          border-right-color: transparent;
        }

        .number-show-box {
          flex: 1 1 auto;
          text-align: center;

          .sj-number {
            color: #2B599C;
            font-size: 30px;
          }

          .sj-label {
            margin-top: 4px;
          }
        }
      }
    }
  }


  .card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #fff;
    line-height: 20px;
    border: 1px solid #83A8E7;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    height: 40px;

    .title-item {
      background-color: #31AFD8;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-right: 30px;
      padding-left: 20px;
    }
  }

  .box-4 {
    display: flex;
    justify-content: flex-start;

    > div {
      flex: 1 1 50%;
      background-color: #FFFFFF;
      margin-right: 16px;
      box-sizing: border-box;
      border-radius: 10px;

      &:last-of-type {
        margin-right: 0;
      }
    }
  }

}

.ratio-box {
  > div {
    padding-bottom: 60%;
    height: 0;
    position: relative;

    .echart-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

::v-deep .el-input__inner {
  border: none !important;
}
</style>
<style>

</style>
